<template>
  <div class="applyContent apply-code">
    <div class="center" style="margin-bottom:20px;font-size: 22px; color: #000;">{{ $t('candyBox.applyForm') }}</div>
    <div>
      <!-- 申请类型 -->
      <div class="applyType">
        <div style="margin-bottom: 10px;">{{ $t('candyBox.applyType') }}</div>
        <el-select v-model.trim="form.type">
          <template v-for="(item, index) in typeList">
            <el-option
            v-if="item.isShow.indexOf(chain) >= 0"
            :key="index"
            :label="item.label"
            :value="item.value"/>
          </template>
        </el-select>
      </div>
    </div>
    <div class="form">
      <!-- 1.上币申请，2.糖果盒子，3.交易大赛-->
      <apply-code v-if="form.type === 1" :timerUpdate='timerUpdate' @listenSubmit="listenSubmit"/>
      <apply-airdrop v-else-if="form.type === 2" :timerUpdate='timerUpdate' @listenSubmit="listenSubmit"/>
      <apply-competition v-else-if="form.type === 3" :timerUpdate='timerUpdate' @listenSubmit="listenSubmit"/>
      <apply-article v-else-if="form.type === 4" :timerUpdate='timerUpdate' @listenSubmit="listenSubmit"/>
    </div>
    <div class="btn">
      <el-button class="submitFormCont" type="primary" @click="handleApplyAction">{{ $t('activity.submit') }}</el-button>
    </div>
    <div class="ewmCode" v-if="form.type === 3 || form.type === 4">
      <!-- <div class="mediaPopTitle center">{{ $t('apiTrade.addSupport') }}</div> -->
      <div class="cont1 flex">
        <div class="type1">
          <span>{{ $t('apiTrade.contact1') }}</span>
          <span>{{ $t('apiTrade.contact1Cont') }}</span>
        </div>
        <div class="submitWordOrder">
          <a :href="jumpWordOrder[$store.state.app.language]" target="_blank">{{ $t('footer.form') }}</a>
        </div>
      </div>
      <div class="cont1 flex">
        <div class="type1">
          <span>{{ $t('apiTrade.contact2') }}</span>
          <span>{{ $t('apiTrade.contact2Cont') }}</span>
        </div>
        <div class="email">{{ $t('apiTrade.officialMailbox') }} support@newdex.zendesk.com</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUrlParams, getReqUrl } from '@/utils/validate';
import axios from 'axios'
import qs from 'qs';
import applyAirdrop from './components/applyAirdrop';
import applyCode from './components/applyCode';
import applyCompetition from './components/applyCompetition';
import applyArticle from './components/applyArticle';

export default {
  name: 'Apply', // 各种申请 上币申请 1，糖果盒子2，交易大赛3，
  components: {
    applyAirdrop,
    applyCode,
    applyCompetition,
    applyArticle,
  },
  data() {
    return {
      chain: '',
      typeList: [
        {
          value: 1,
          label: this.$t('footer.sbApply'),
          isShow: 'EOS,BOS,MEETONE,ENU,FIBOS,TELOS,TRON,WAX,LYNX'
        },
        {
          value: 2,
          label: this.$t('candyBox.listCandy'),
          isShow: 'EOS'
        },
        {
          value: 3,
          label: this.$t('apiTrade.tradeSignUp1'),
          isShow: 'EOS'
        },
        {
          value: 4,
          label: this.$t('apiTrade.submitArticle'),
          isShow: 'EOS'
        }
      ],
      form: {
        name: '', // 项目名称
        code: '', // token名称
        contract: '', // 合约名称
        website: '', // 官网
        airdropCount: '', // 空投总量
        contact: '', // 联系方式
        chain: 'EOS',
        type: 1, // 1.上币申请，2.糖果盒子，3.交易大赛
        introduction: '', // 币种介绍
        logoUrl: '', // 图片地址
      },
      timerUpdate: {
        time: null,
        action: 'submit',
      },
      jumpWordOrder: {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/requests/new',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/requests/new',
        en: 'https://newdex.zendesk.com/hc/en-us/requests/new',
        ko: 'https://newdex.zendesk.com/hc/ko/requests/new'
      }, // 提交工单地址
    };
  },
  props: {
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.chain = this.$store.state.app.scatter.chain.toUpperCase();
      },
      deep: true,
    },
    '$store.state.app.language': function change() {
      this.typeList = [
        {
          value: 1,
          label: this.$t('footer.sbApply'),
          isShow: 'EOS,BOS,MEETONE,ENU,FIBOS,TELOS,TRON,WAX,LYNX'
        },
        {
          value: 2,
          label: this.$t('candyBox.listCandy'),
          isShow: 'EOS'
        },
        {
          value: 3,
          label: this.$t('apiTrade.tradeSignUp1'),
          isShow: 'EOS'
        },
        {
          value: 4,
          label: this.$t('apiTrade.submitArticle'),
          isShow: 'EOS'
        }
      ]
    }
  },
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
    const href = window.location.href;
    const urlparams = getUrlParams(href);
    this.form.type = Number(urlparams.type) || 1;
  },
  mounted() {
    const scat = this.$store.state.app.scatter;
    this.chain = scat ? scat.chain.toUpperCase() : 'EOS';
  },
  beforeDestroy() {
  },
  methods: {
    // 获取表单数据
    listenSubmit(type, val) {
      // 判断有无登录
      const scat = this.$store.state.app.scatter;
      if (scat && !scat.identity) {
        this.$message.error(this.$t('public.signIn'));
        return;
      }
      this.form = val;
      if (type === 'applyArticle') {
        this.handleApplyAticle();
        return;
      }

      this.handleApplySubmit();
    },
    // 提交
    handleApplyAction() {
      // if (this.form.type === 4) {
      this.timerUpdate.time = new Date().getTime();
      this.timerUpdate.action = 'submit';
      //   return;
      // }
      // authorized(this, (code, res) => {
      //   if (code === 'error') { // 授权错误
      //     console.log(res); // eslint-disable-line
      //     return;
      //   }
      //   this.timerUpdate.time = new Date().getTime();
      //   this.timerUpdate.action = 'submit';
      // });
    },
    // 提交到服务端
    handleApplySubmit() {
      const linkUrl = getReqUrl();
      const language = this.$store.state.app.language;
      const params = this.form;
      params.chain = this.form.chain.toLowerCase();
      const scatter = this.$store.state.app.scatter;
      let account = '';
      let chain = 'eos';
      if (scatter && scatter.identity) {
        account = scatter.identity.accounts[0].name;
        const wallet = scatter.wallet;
        if (wallet) {
          chain = scatter.chain || 'eos';
        }
      }
      if (this.$appName === 'tronNewdex') {
        chain = 'tron';
      }
      axios({
        method: 'post',
        url: `${linkUrl}/api/commons/candy/apply`,
        data: qs.stringify(params),
        headers: {
          chain,
          channel: 'web',
          language,
          account,
          'Content-Type': 'application/x-www-form-urlencoded'
        },
      }).then((res) => {
        // if (res.code !== 0) {
        //   this.$message.error(res.msg);
        //   return;
        // }
        if (res.data.code === 1019) {
          this.$message.error(this.$t('candyBox.applyBefore'));
          return;
        }
        if (res.data.code !== 0) {
          const msg = res.msg || 'System error'
          this.$message.error(msg);
          return;
        }
        const applyType = this.form.type === 1 ? this.$t('candyBox.dataSuccess') : this.$t('candyBox.applySuccess');
        // 成功
        this.$alert(applyType, {
          type: 'success',
          center: true,
          showConfirmButton: false,
          callback: () => {
            this.timerUpdate.time = new Date().getTime();
            this.timerUpdate.action = 'reset';
          }
        })
      })
    },
    // 提交文章
    handleApplyAticle() {
      const params = this.form;
      this.$http.post('/eventArticle/submit', params).then((res) => {
        if (res.code !== 0) {
          const msg = res.msg || 'System error'
          this.$message.error(msg);
          return;
        }
        // const applyType = this.form.type === 1 ? this.$t('candyBox.dataSuccess') : this.$t('candyBox.applySuccess');
        // 成功
        this.$alert(this.$t('candyBox.applySuccess'), {
          type: 'success',
          center: true,
          showConfirmButton: false,
          callback: () => {
            this.timerUpdate.time = new Date().getTime();
            this.timerUpdate.action = 'reset';
          }
        })
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.applyContent /deep/ .el-select{
  width: 100%;
}

.apply-code {
  padding: 50px 50px 20px;
  margin-top: 50px;
  width: 800px;
  margin: 0 auto;
  background: #fff;
  min-height: 1000px;

  .applyType {
    margin-bottom: 24px;
  }

  .btn {
    text-align: center;
    margin-top: 50px;

    .submitFormCont {
      width: 200px;
    }
  }
}

.ewmCode {
  // margin-top: 20px;
  padding: 40px 0;

  .caption {
    margin: 20px 0;
    font-size: 22px;
  }
  .cont1 {
    font-size: 18px;
    margin-bottom: 49px;

    .type1 {
      flex: 3;
      span:nth-child(1) {
        color: #4A90E2;
      }
    }

    .submitWordOrder {
      flex: 2;

      a {
        display: inline-block;
        font-size: 15px;
        padding: 9px 15px;
        border: 2px solid #26ADFC;
        border-radius: 5px;
        color: #26ADFC;
        cursor: pointer;
      }
    }

    .email {
      flex: 2;
    }
  }
}

.submitForm {
   margin-bottom: 0;
  .submitFormCont {
    width: 200px;
  }
}

.theme-278EDA {
}
.theme-1B1D27 {
  .apply-code {
    /deep/ .el-input__inner {
      color: #000;
      background: #fff;
    }
  }
  .applyType {
    .el-select {
      /deep/ .el-input__inner {
        background: rgb(21, 34, 71) !important;
        color: #fff;
      }
    }
  }
}
</style>

